<script lang="ts" setup>
defineProps({
  content: {
    type: String,
    default: '',
  },
  theme: {
    type: String,
    default: 'white',
  },
})
function clearHtmlStyle(html: string) {
  let result = html.replace(/<style[\s\S]*?<\/style>/gi, '')
  // 清除style属性
  result = result.replace(/style\s*=\s*["'][^"']*["']/gi, '')
  return result
}
</script>

<template>
  <div class="rule-box" :class="theme">
    <div class="rule-title">
      <div>{{ $t('activity.event_prev.activityDescription') }}</div>
    </div>
    <div class="rule-content">
      <span v-if="content" class="rule-content-text" v-html="clearHtmlStyle(content)" />
      <slot v-else />
    </div>
  </div>
</template>

<style scoped lang="scss">
.rule-box {
  position: relative;
  margin-top: 37.5px;

  .rule-title {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: #7a4289;
    font-weight: 700;
  }

  .rule-content {
    margin-top: 16.5px;
    color: #86718c;
    font-size: 13.125px;
    text-align: left;
    line-height: 18.75px;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}
</style>
